<template>
    <div>
        <div class="detail-load" v-show="!cataloguelist">
            <div class="load-content">
                <van-loading type="spinner" color="#1989fa" vertical size="50px"/>
            </div>
            
        </div>

        <!-- 头部 -->
        <div class="category-header" v-if="cataloguelist">
            <span @click="goBack"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></span>
            <div class="icont-header">{{booktitle}}</div>
        </div>

        <!-- 目录 -->
        <div class="nav-list" v-if="cataloguelist"><div class="txt">目录</div></div>
        <div class="list-length" v-if="cataloguelist">
            <div class="list-left">共{{cataloguelist.length}}章</div>
                
            <div class="list-right" @click="getInverted">倒序</div>
        </div>
        <ul class="all-list" v-if="cataloguelist">
            <li v-for="(item,index) in cataloguelist" :key="index" @click="btnList({id:item.secId,index:index})">{{item.title}}</li>
        </ul>
    </div>
</template>

<script>
import { Toast } from 'vant'
import {getCatalogue} from "../../api/bookdetail"
export default {
    props:['bookids','coin'],
    data(){
        return {
            cataloguelist:null,
            booktitle:null,
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        },
        //目录倒序
        getInverted(){
            this.cataloguelist=this.cataloguelist.reverse();
        },
        btnList(id){
            if(id.index>9){
                if(this.coin-5>=0){
                    this.$emit('get-sum',5)
                    this.$router.push({name:'bookcontent',params:{id:this.bookids,uid:id.id}})
                    Toast('购买成功')
                }else{
                    Toast('余额不足，请充值')
                }
            }else{
                this.$router.push({name:'bookcontent',params:{id:this.bookids,uid:id.id}})
            }
            
        },
    },
    created(){
        getCatalogue({
            source_uuid:this.bookids
        }).then(data=>{
            this.cataloguelist=data.data.catalog
            this.booktitle=data.data.book.title
            // console.log('书籍目录',data)
        })
    }
}
</script>

<style lang="less" scoped>
.detail-load{
    width: 375px;
    height: 667px;
    display: flex;
    justify-content: center;
    align-items: center;
    .load-content{
        width: 50px;
        height: 50px;
    }
}


.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

//目录
.nav-list{
    margin: auto;
    width: 375px;
    height: 45px;
    // padding-left: 16px;
    line-height: 45px;
    color: #F01742;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #F01742;
    .txt{
        height: 45px;
        // padding-right: 50px;
    }
}
.list-length{
    margin: auto;
    width: 375px;
    height: 44px;
    display: flex;
    // padding-left: 16px;
    // margin: auto;
    justify-content: space-between;
    line-height: 44px;
    .list-left{
        padding-left: 16px;
    }
    .list-right{
        padding-right: 16px;
        font-size: 0.75rem;
    }
}


.all-list{
    width: 375px;
    // padding-left: 16px;
    margin: auto;
    li{
        width: 359px;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        padding-left: 16px;
    }
}

</style>